import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:fsharing/core/models/store_categories.dart';
import 'package:fsharing/core/viewmodels/pages/store/store_categories_model.dart';
import 'package:fsharing/core/viewmodels/view_model.dart';
import 'package:fsharing/main.dart';
import 'package:provider/provider.dart';

class StoreCategoryTabItemPage extends StatelessWidget {
  final int storeId;
  final int parentCategoryId;

  StoreCategoryTabItemPage({
    Key key,
    @required this.storeId,
    @required this.parentCategoryId,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => StoreCategoriesModel(
        Provider.of(context, listen: false),
        storeId,
        parentCategoryId,
        2,
      ),
      child: Scaffold(
        body: Consumer<StoreCategoriesModel>(
          builder: (context, model, child) {
            switch (model.viewState) {
              case ViewState.busy:
                return Center(
                  child: CircularProgressIndicator(),
                );
              case ViewState.error:
                return Center(
                  child: Text(model.errorMessage),
                );
              case ViewState.success:
                return _SuccessWidget();
              default:
                return Container();
            }
          },
        ),
      ),
    );
  }
}

class _SuccessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    StoreCategoriesModel model = Provider.of(context, listen: false);
    final list = model.storeCategories.childCategoriesV2.first?.children ?? [];
    return ListView.builder(
      padding: EdgeInsets.symmetric(horizontal: 12),
      itemBuilder: (context, index) {
        return _CategoryItemWidget(
          category: list[index],
        );
      },
      itemCount: list.length,
    );
  }
}

class _CategoryItemWidget extends StatelessWidget {
  final Category category;

  _CategoryItemWidget({
    Key key,
    @required this.category,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final list = category.children;
    return InkWell(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.symmetric(vertical: 12),
            child: Text(
              category.name,
              style: TextStyle(fontSize: 15),
            ),
          ),
          Theme(
            data: lightTheme(),
            child: Material(
              borderRadius: BorderRadius.circular(8),
              child: GridView.builder(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                padding: EdgeInsets.all(12),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  mainAxisSpacing: 8,
                  crossAxisSpacing: 8,
                  childAspectRatio: 0.8,
                ),
                itemBuilder: (context, index) {
                  return _CategorySubItemWidget(
                    category: list[index],
                  );
                },
                itemCount: list.length,
              ),
            ),
          ),
        ],
      ),
      onTap: () {
        _onItemClicked(context);
      },
    );
  }

  void _onItemClicked(BuildContext context) {
    Navigator.of(context).pop(category);
  }
}

class _CategorySubItemWidget extends StatelessWidget {
  final Category category;

  _CategorySubItemWidget({
    Key key,
    @required this.category,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          CachedNetworkImage(
            imageUrl: category.imageUrl,
            width: 64,
            height: 64,
            fit: BoxFit.fill,
          ),
          Container(
            margin: EdgeInsets.only(top: 8),
            child: Text(
              category.name,
              style: TextStyle(fontSize: 13),
            ),
          ),
        ],
      ),
      onTap: () {
        _onItemClicked(context);
      },
    );
  }

  void _onItemClicked(BuildContext context) {
    Navigator.of(context).pop(category);
  }
}
